<!-- 搜索表单 -->
<template>
  <a-form
    :label-col="{
      xl: { span: 7 },
      lg: { span: 5 },
      md: { span: 7 },
      sm: { span: 4 }
    }"
    :wrapper-col="{
      xl: { span: 17 },
      lg: { span: 19 },
      md: { span: 17 },
      sm: { span: 20 }
    }"
  >
    <a-row>
      <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item label="用户账号">
          <a-input
            v-model:value.trim="where.username"
            placeholder="请输入"
            allow-clear
          />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item label="用户名">
          <a-input
            v-model:value.trim="where.nickname"
            placeholder="请输入"
            allow-clear
          />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item label="登录时间">
          <a-range-picker
            v-model:value="dateRange"
            value-format="YYYY-MM-DD"
            class="ele-fluid"
          />
        </a-form-item>
      </a-col>
      <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
          <a-space>
            <a-button type="primary" @click="search">查询</a-button>
            <a-button @click="reset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
  import { ref } from 'vue';
  import useSearch from '@/utils/use-search';

  const emit = defineEmits(['search']);

  // 表单数据
  const { where, resetFields } = useSearch({
    username: '',
    nickname: ''
  });

  // 日期范围选择
  const dateRange = ref([]);

  /* 搜索 */
  const search = () => {
    const [d1, d2] = dateRange.value ?? [];
    emit('search', {
      ...where,
      createTimeStart: d1 ? d1 + ' 00:00:00' : '',
      createTimeEnd: d2 ? d2 + ' 23:59:59' : ''
    });
  };

  /*  重置 */
  const reset = () => {
    resetFields();
    dateRange.value = [];
    search();
  };
</script>
